<template>
  <view>
    <!--    <view :style="{ paddingTop: `${barHeight}px` }" class="me"></view> -->
    <view class="header-bg dynamic-padding" :style="{'--dynamic-padding-top': `${barHeight + 20}px`}">
      <view class="user-info">
        <view class="avatar-wrapper">
          <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"/>
          <view class="vip-badge">{{ userInfo.userTag || '内测' }}</view>
        </view>
        <view class="user-detail">
          <text class="username">{{ userInfo.nickName || 'Hi ~' }}</text>
          <text class="user-id">ID: {{ userInfo.userId || '00001' }}</text>
        </view>
        <view class="setting-icon">
          <uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
        </view>
      </view>
    </view>
    <view class="analysis">
      <view class="subject">
        <uni-forms label-position="left" border>
          <uni-forms-item label="经期设置">
            <template slot="label">
              <view class="sub-title">
                经期设置
              </view>
            </template>
            <view class="right-icon" @click="gotoUrl('periodSetting')">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
          <uni-forms-item label="提醒通知">
            <template slot="label">
              <view class="sub-title">
                提醒通知
              </view>
            </template>
            <view class="right-icon">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="analysis">
      <view class="subject">
        <uni-forms label-position="left" border>
          <uni-forms-item label="比价器">
            <template slot="label">
              <view class="sub-title">
                比价器
              </view>
            </template>
            <view class="right-icon" @click="gotoUrl('priceComparator')">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="analysis">
      <view class="subject">
        <uni-forms label-position="left" border>
          <uni-forms-item label="账号与安全">
            <template slot="label">
              <view class="sub-title">
                账号与安全
              </view>
            </template>
            <view class="right-icon" @click="gotoUrl('personalData')">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
          <uni-forms-item label="意见反馈">
            <template slot="label">
              <view class="sub-title">
                意见反馈
              </view>
            </template>
            <view class="right-icon">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
          <uni-forms-item label="关于我们">
            <template slot="label">
              <view class="sub-title" @click="gotoUrl('about')">
                关于我们
              </view>
            </template>
            <view class="right-icon">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
          <uni-forms-item label="注销">
            <template slot="label">
              <view class="sub-title">
                注销
              </view>
            </template>
            <view class="right-icon" @click="gotoUrl('clearData')">
              <u-icon name="arrow-right" color="#979797" size="22"></u-icon>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="logout-container">
      <button class="logout-button" @click="exit">退出重登
      </button>
    </view>
  </view>
</template>

<script>
import request from '@/api/request.js';

export default {
  components: {},
  data() {
    return {
      barHeight: 0,
      statusBarHeight: 0,
      userInfo: {
        avatarUrl: "",
        nickName: ""
      }
    }
  },
  methods: {
    gotoUrl(targetUrl) {
      if ("fundamentalAnalysis" == targetUrl) {
        // 基础分析
        uni.navigateTo({
          url: "/pages-other/record/index"
        })
      } else if ("intelligentAnalytics" == targetUrl) {
        // 智能分析
      } else if ("periodSetting" == targetUrl) {
        // 经期设置
        uni.navigateTo({
          url: "/pages-other/menstrualCycleSetting/index"
        })
      } else if ("personalData" == targetUrl) {
        // 个人资料
        uni.navigateTo({
          url: "/pages-other/info/index"
        })
      } else if ("" == targetUrl) {
        // 关于
      } else if ("priceComparator" == targetUrl) {
        // 比价器
        uni.navigateTo({
          url: "/pages-other/priceComparator/index"
        })
      } else if ("clearData" == targetUrl) {
        // 清空数据
        uni.showModal({
          title: '提示',
          content: '确认要清空所有数据吗？清空后不可恢复',
          success: function (res) {
            if (res.confirm) {
              // 发送请求
              request({
                url: `/wxUser/logout?openid=${uni.getStorageSync("miuUserInfo").openid}`,
                method: 'POST',
                custom: {
                  showError: false,
                  showLoading: true,
                },
              }).then((res) => {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
                setTimeout(() => {
                  uni.reLaunch({
                    url: "/pages/home/index"
                  })
                }, 2000)
              })
              uni.removeStorageSync("miuUserInfo")
            }
          }
        });
      }
    },
    exit() {
      uni.removeStorageSync("miuUserInfo")
      uni.showToast({
        title: "退出成功，正在重新登陆",
        icon: "none"
      })
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/welcome/index"
        })
      }, 2000)
    }
  },
  onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 胶囊数据
    const {
      top,
      height
    } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为36
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 36;
  },
  onShow() {
    // 更新用户头像数据
    if (uni.getStorageSync("miuUserInfo").avatarUrl != "") {
      this.userInfo.avatarUrl = "https://miu-bloom.oss-cn-qingdao.aliyuncs.com/avatar/" + uni.getStorageSync("miuUserInfo").avatarUrl
    } else {
      this.userInfo.avatarUrl = "https://miu-bloom.oss-cn-qingdao.aliyuncs.com/avatar/defaultImg.jpg"
    }
    this.userInfo.nickName = uni.getStorageSync("miuUserInfo").nickName;
    this.userInfo.userId = uni.getStorageSync("miuUserInfo").userNumber;
    this.userInfo.userTag = uni.getStorageSync("miuUserInfo").userTag;
  }
}
</script>

<style lang="scss">
@import "@/pages/me/index.less";
</style>
